@foregroundColor: #03A9F4;
@highlightColor: #fefefe;
@backgroundColor: #f1f1f1;
@fontColor: #2c3e50;
@lightfontColor: #626970;
@maxWidth: 100rem;
@minWidth: 76.8rem;
@headerHeight: 8rem;
.center() {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body {
  background-color: @backgroundColor;
  overflow-x: hidden;
}

header {
  .center();
  flex-direction: row;
  position: fixed;
  top: 0;
  left: 50%;
  // min-width: @minWidth;
  max-width: @maxWidth;
  width: 100%;
  height: @headerHeight;
  background-color: @foregroundColor;
  color: @highlightColor;
  transform: translateX(-50%);
  z-index: 10;
  & + .container {
    padding-top: @headerHeight + 2rem;
  }
  & > * {
    margin: 0;
  }
  .back {
    background-image: url('../icon/back_icon.svg');
  }
  .about {
    background-image: url('../icon/about_icon.svg');
  }
  & > button {
    margin: 0 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: @foregroundColor;    
    border: 0;
    &:hover,
    &:focus {
      background-color: @foregroundColor;
    }
  }
}

.container {
  .center();
  flex-direction: column;
  // min-width: @minWidth;
  max-width: @maxWidth;
  width: 100%;
  min-height: @maxWidth;
  margin: 0 auto;
  margin-bottom: 8rem;
  .rw {
    position: relative;
    .center();
    justify-content: center;
    width: 100%;
    padding: 2rem;
    margin-bottom: 2rem;
    background-color: @highlightColor;
    span {
      font-size: 3.5rem;
      color: @lightfontColor;
    }
    button {
      position: absolute;
      right: 1rem;
      margin: 0;
      background-image: url(../icon/more_icon.svg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
  }
  .cl {
    .center();
    flex-direction: column;
    margin: 0;
    padding: 4rem 0;
    background-color: @highlightColor;
    width: 100%;
    h2 {
      color: @lightfontColor;
    }
    hr {
      width: calc(~"100% - 10rem");
      border-color: @lightfontColor;
      border-top-width: .2rem;
      margin-top: 1rem;
      margin-bottom: 4rem;
    }
    p {
      font-size: 2.5rem;
    }
    .column {
      width: calc(~"100% - 20rem");
      padding: 4rem 2rem;
      margin-bottom: 2rem;
      font-size: 3.0rem;
      background-color: @foregroundColor;
      color: @highlightColor;
      cursor: pointer;
    }
    ul {
      .center();
      justify-content: center;
      flex-wrap: wrap;
      flex-direction: column;
      width: calc(~"100% - 20rem");
      height: 15rem;
      li {
        .center();
        justify-content: center;
        flex-direction: row;
        position: relative;
        min-width: 10rem;
        min-height: 10rem;
        list-style: none;
        overflow: hidden;
        border-radius: 20rem;
        img {
          position: absolute;
          max-height: 11rem;
          max-width: none;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      span {
        width: 10rem;
        font-size: 2rem;
      }
    }
    .ct-input {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 5rem;
      margin-top: 10rem;
      background-color: @highlightColor;
      input {
        max-width: 6rem;
      }
      .input-title {
        color: @fontColor;
      }
      .input-dp {
        color: @lightfontColor;
        margin-left: 1rem;
      }
    }
  }
}
.full {
  .center();
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(55, 71, 79, 0.38);
  z-index: 12;
  .waring-box {
    .center();
    justify-content: space-around;
    flex-direction: column;
    width: 50rem;
    height: 30rem;
    background-color: @backgroundColor;
    border-radius: 1rem;
    h1 {
      color: #FF5722;
    }
    button {
      background-color: @foregroundColor;
      border-color: @foregroundColor;
      font-size: 2rem;
      height: 5rem;
    }
  }
}
